<template>
  <div class="#(name)-wrapper">
    <el-card class="center" shadow="hover">
      <zy-crud title="#(title)" :baseUrl="baseUrl" :formRules="formRules">
        <template v-slot:queryFormItems="{ queryParams }">
          <el-form-item label="名称">
            <el-input v-model="queryParams.name" clearable style="width: 150px" />
          </el-form-item>
        </template>

        <template v-slot:tbColumns>
          #for(field : fields)
          #if(field.typeName == 'Boolean')
          <el-table-column prop="#(field.columnProp)" label="#(field.title)" align="center" width="100">
            <template v-slot="{row}">
              <el-tag :type="row.#(field.columnProp) ? 'success' : 'danger'">{{row.#(field.columnProp) ? '是' : '否'}}</el-tag>
            </template>
          </el-table-column>
          #else if(field.isTagEnum)
          <el-table-column prop="#(field.columnProp)" label="#(field.title)" align="center" width="130">
            <template #(symbol)default="{row}">
              <el-tag :type="row.#(field.tagEnumVOName)?.tagType">{{row.#(field.tagEnumVOName)?.text}}</el-tag>
            </template>
          </el-table-column>
          #else if(field.isEnum)
          <el-table-column prop="#(field.columnProp)" label="#(field.title)" align="center" width="150" />
          #else if(field.isTextArea)
          <el-table-column prop="#(field.columnProp)" label="#(field.title)" show-overflow-tooltip width="150" />
          #else
          <el-table-column prop="#(field.columnProp)" label="#(field.title)" width="150" />
          #end
          #end
        </template>

        <template v-slot:formItems="{ formData }">
          <el-form-item label="ID" class="add-hidden grid-span24">
            <el-input v-model="formData.id" readonly />
          </el-form-item>
          #for(field : fields)
          #if(field.name != 'id' && field.name != 'createTime')
          <el-form-item label="#(field.title)" prop="#(field.name)" class=#if(fields.size() > 30)"grid-span8"#else if(fields.size() > 20)"grid-span12"#else"grid-span24"#end>
            #if(field.isForeignKey)
            <el-select v-model="formData.#(field.name)" filterable clearable>
              <el-option v-for="item in #(field.foreignDataName)" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            #else if(field.typeName == 'String')
            <el-input v-model="formData.#(field.name)" #if(field.isTextArea)type="textarea" :rows="2" :autosize="{ minRows: 2, maxRows: 4 }" #end #if(field.maxLength)maxlength="#(field.maxLength)" show-word-limit #end clearable />
            #else if(field.typeName == 'Boolean')
            <el-radio-group v-model="formData.#(field.name)">
              <el-radio v-for="item in isEnums" :key="item.name" :value="item.name">{{ item.text }}</el-radio>
            </el-radio-group>
            #else if(field.typeName == 'LocalDate')
            <el-date-picker v-model="formData.#(field.name)" type="date" value-format="YYYY-MM-DD" clearable />
            #else if(field.typeName == 'LocalDateTime' || field.typeName == 'Date')
            <el-date-picker v-model="formData.#(field.name)" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" clearable />
            #else if(field.typeName == 'Integer')
            <el-input-number v-model="formData.#(field.name)" :min="0" :max="9999" clearable />
            #else if(field.isEnum)
            <el-select v-model="formData.#(field.name)" filterable clearable>
              <el-option v-for="item in enumDataName" :key="item.name" :label="item.text" :value="item.name" />
            </el-select>
            #else
            <el-input v-model="formData.#(field.name)" clearable />
            #end
          </el-form-item>
          #end
          #end
        </template>
      </zy-crud>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { FORM_RULES } from '@/common/options';
#if(hasBooleanField)
import { isEnum } from '@/api/enums.js';
#end
const baseUrl = '#(baseUrl)';
#if(hasBooleanField)
const isEnums = ref([]);
#end
#for(field : fields)
#if(field.isEnum)
const #(field.enumDataName) = ref([]);
#end
#if(field.isForeignKey)
const #(field.foreignDataName) = ref([]);
#end
#end
const formRules = ref({
  #for(field : fields)
  #if(field.notNull && field.name != "id")
  #(field.name): [FORM_RULES.nonNull],
  #end
  #end
});

onMounted(() => {
  #if(hasBooleanField)
  isEnums.value = isEnum();
  #end
});
</script>

<style lang="less" scoped>
.#(name)-wrapper {
  height: 100%;
}
</style>
